html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#app {
    margin: 0 auto;
    width: 100vmin;
    height: 100vmin;
    position: relative;
    background-color: #535353;
}

.tile {
    box-sizing: border-box;
    border-radius: 4px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    transition: left ease-in-out .2s, top ease-in-out .2s;
    overflow: hidden;
    user-select: none;
    will-change: auto;
}

.tile.new {
    animation-name: scaleAni;
    animation-timing-function: ease-in-out;
    animation-duration: .3s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

@keyframes scaleAni {
    0% {
        transform: scale(.5);
    }

    100% {
        transform: scale(1);
    }
}


.tile:before {
    position: absolute;
    content: ' ';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid #535353;
    border-radius: 4px;
    overflow: hidden;
}

.tile.tile-2 {
    color: #776e65;
    background: #eee4da;
}

.tile.tile-4 {
    color: #776e65;
    background: #ede0c8;
}

.tile.tile-8 {
    color: #f9f6f2;
    background: #f2b179;
}

.tile.tile-16 {
    color: #f9f6f2;
    background: #f59563;
}

.tile.tile-32 {
    color: #f9f6f2;
    background: #f67c5f;
}

.tile.tile-64 {
    color: #f9f6f2;
    background: #f65e3b;
}

.tile.tile-128 {
    color: #f9f6f2;
    background: #edcf72;
}

.tile.tile-256 {
    color: #f9f6f2;
    background: #edcc61;
}

.tile.tile-512 {
    color: #f9f6f2;
    background: #edc850;
}

.tile.tile-1024 {
    color: #f9f6f2;
    background: #edc53f;
}

.tile.tile-2048 {
    color: #f9f6f2;
    background: #edc22e;
}


.control {
    position: fixed;
    bottom: 10px;
    right: 20px;
}